"use client";
import React, { ReactNode } from 'react';
import "./button.scss";
import Loading from '../../components/Loading';

export type ButtonSize = "large" | "medium" | "small";
export type ButtonType = "primary" | "secondary" | "tertiary" | "warning" | "danger";
export type ButtonTheme = "solid" | "outline" | "light" | "borderless";
export type ButtonPicPosition = "left" | "right";

export type ButtonProps = {
    children?: ReactNode,
    type?: ButtonType,
    width?: string,
    height?: string,
    theme?: ButtonTheme;
    style?: React.CSSProperties;
    size?: ButtonSize;
    block?: boolean;
    icon?: ReactNode;
    disabled?: boolean;
    onClick?: (e?: React.MouseEvent) => void;
    onHover?: () => void;
    picposition?: ButtonPicPosition;
    isLoading?: boolean;
    margin?: string;
    padding?: string;
    rounded?: string;
    className?: string;
    border?: string;
    float?: boolean;
    position?: string;
    flexDirection?: "row" | "col";
    shadow?: string;
    borderStyle?: "dashed" | "solid" | "dotted";
    picCircle?: boolean;
};

const Button = ({
    children = null,
    type = "primary",
    width,
    theme = "light",
    style,
    size = "medium",
    block = false,
    icon = null,
    disabled = false,
    onClick,
    onHover,
    picposition = "left",
    isLoading = false,
    margin,
    rounded = "rounded-[3px]",
    className,
    border,
    float = false,
    position,
    flexDirection = "row",
    shadow,
    height,
    padding,
    borderStyle = "solid",
    picCircle = false }: ButtonProps) => {
    // 只有icon的情况下，设置默认大小
    let onlyIconSize;
    if (children === null) {
        onlyIconSize = "!w-10 !h-10";
    }
    return (
        <>
            <button
                onMouseEnter={onHover}
                onClick={onClick}
                disabled={disabled}
                data-size={size}
                data-type={type + theme}
                data-border={borderStyle}
                style={{ ...style, width: width, height: height }}
                className={`${picCircle && "!rounded-full"} button min-w-[auto] inline-flex hover:cursor-pointer shrink-0 ${margin} ${rounded} ${width ? width : onlyIconSize} ${height} transition-all ${padding} justify-center ${block && "block"} ${icon && "haspicButton"} break-all whitespace-normal items-center ${className} ${shadow} ${border} flex-${flexDirection} ${float && `fixed z-999`} ${position}`}>
                {isLoading && <Loading />}
                {(picposition === "left" && !isLoading) && icon}
                {children}
                {(picposition === "right" && !isLoading) && icon}
            </button>

        </>
    );
};

export default Button;
